<template>
<div class="list" ref="wrapper">
	<div>
		<div class="area">
			<div class="title border-topbottom">当前城市</div>

			<div class="btn-list">
				<div class="btn-wrapper">
					<div class="btn">{{this.$store.state.city}}</div>
				</div>

			</div>
		</div>
		<div class="area">
			<div class="title border-topbottom">热门城市</div>

			<div class="btn-list">
				<div class="btn-wrapper" v-for="item of hotCities" :key="item.id" @click='handleCityClick(item.name)'>
					<div class="btn">{{item.name}}</div>
				</div>

			</div>
		</div>
		<div class="area" 
        v-for="(item, key,index) of cities"
        :key="key"
        ref="key"
        :class="key"
        
        
			>
			<div class="title border-topbottom" >{{key}}{{index}}</div>

			<div class="item-list">
				<div class="item border-bottom" v-for="innerItem of item" :key="innerItem.i" 
					@click='handleCityClick(innerItem.name)'
					>{{innerItem.name}}</div>
		
			</div>
		</div>

	</div>
</div>
	
</template>

<script>
	import BScroll from 'better-scroll'
	export default {
		name: 'CityList',
props: {
		hotCities: Array,
		cities: Object,
		letter: String,
		CityIndex:0
},
	mounted() {
		this.scroll = new BScroll(this.$refs.wrapper);

	},
	methods: {
		handleCityClick(city) {
			this.$store.commit('changeCity',city)
			this.$router.push('/')
		}
	},
	watch: {
		CityIndex() {

			if(this.CityIndex>=0) {
				
					console.log(this.CityIndex);
					
				const element = this.$refs.key;
	
//				console.log(element);
				
				
				var ele =element[this.CityIndex]

				this.scroll.scrollToElement(ele);
			}
			
		},
//		letter () {
//			
//			if(this.letter){
//				
//				console.log(this.letter)
//				const element =this.$resfs[this.letter][0]
//				//报错 ，未知bug，用CityIndex方法 代替
//				console.log(element)
//				this.scroll.scrollToElement(ele)
//				
//			}
//			
//		}
	}
}


</script>

<style lang="stylus" scoped="scoped">
	@import '~styles/varibles.styl'
	.border-topbottom
	  &:before
	    border-color: #ccc
	.border-topbottom
	  &:after
	    border-color: #ccc
	.border-bottom
	  &:before
	    border-color: #ccc
	
	.list
	  overflow: hidden;
	  position: absolute;
	  top: 1.58rem;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  
		.title
		  height: .54rem;
		  line-height: .6rem;
		  background: #eee;
		  padding-left: .2rem;
		  color: #666;
		  font-size: .28rem;
		.btn-list
		  overflow: hidden;
		  padding: .1rem .6rem .1rem .1rem
		  .btn-wrapper
		    float: left;
		    width: 33.33%;
		    .btn
		      margin: .1rem;
		      padding: .1rem;
		      text-align: center;
		      border:0.02rem solid #ccc;
		      border-radius: 0.06rem;
		.item-list
		  .item
		    line-height: .76rem;
		    height: .76rem;
		    padding-left: .2rem;
	   
</style>